<template>
  <div id="dbinfo">
    <div class="t_header">
      <el-button type="primary" @click="dilogdbconfigadd = true"
        >新增数据库配置</el-button
      >
      <el-dialog
        title="新增数据库配置"
        width="50%"
        :visible.sync="dilogdbconfigadd"
        destroy-on-close
      >
        <el-form
          :model="addDbForm"
          label-width="15%"
          ref="addDbForm"
          :rules="rules"
        >
          <el-form-item label="所属项目">
            <el-select
              v-model="addDbForm.project_id"
              placeholder="请选择所属项目"
              :filterable="true"
            >
              <el-option
                v-for="pj in projectList"
                :key="pj.id"
                :label="pj.project_name"
                :value="pj.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据库名称">
            <el-input
              v-model="addDbForm.dbname"
              autocomplete="off"
              placeholder="输入项目名称，不能重复"
              style="width: 70%"
            ></el-input>
          </el-form-item>

          <el-form-item label="连接类型">
            <el-select v-model="addDbForm.db_env" placeholder="请选择连接类型">
              <el-option label="测试环境" value="QA"></el-option>
              <el-option label="生产环境" value="PROD"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="数据库地址" prop="dburl">
            <el-input
              v-model="addDbForm.dbhost"
              autocomplete="off"
              placeholder="输入数据库链接地址，不能重复"
              style="width: 70%"
            ></el-input>
          </el-form-item>

          <el-form-item label="数据库端口" prop="dbport">
            <el-input
              v-model="addDbForm.dbport"
              autocomplete="off"
              placeholder="输入端口"
              style="width: 70%"
            ></el-input>
          </el-form-item>
          <el-form-item label="连接库名">
            <el-input
              v-model="addDbForm.dbdatabase"
              autocomplete="off"
              placeholder="输入链接的库名"
              style="width: 70%"
            ></el-input>
          </el-form-item>

          <el-form-item label="数据库账号" prop="username">
            <el-input
              v-model="addDbForm.dbusername"
              autocomplete="off"
              placeholder="数据库用户名"
              style="width: 70%"
            ></el-input>
          </el-form-item>

          <el-form-item label="数据库密码" prop="password">
            <el-input
              v-model="addDbForm.dbpassword"
              placeholder="数据库用户名"
              style="width: 70%"
              show-password
            ></el-input>
            <el-tooltip
              class="item"
              effect="dark"
              content="需要输入数据库连接的相关信息"
              placement="bottom"
            >
              <el-button type="text" @click="checkConn()"
                >测试连接信息</el-button
              >
            </el-tooltip>
          </el-form-item>
          <el-form-item>
            <div class="pjsubmit">
              <el-button type="primary" @click="add_db_config()"
                >新增</el-button
              >
              <el-button @click="dilogdbconfigadd = false">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <el-table
      :data="dbConfigList"
      border
      :row-style="{ height: '10px' }"
      max-height="800px"
    >
      <el-table-column prop="project_name" label="所属项目" width="120">
      </el-table-column>
      <el-table-column
        prop="dbname"
        label="数据库名称"
        width="150"
      ></el-table-column>

      <el-table-column
        prop="db_env"
        label="链接类型"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="dbhost"
        label="数据库地址"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="dbport"
        label="数据库端口"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="dbdatabase"
        label="连接库"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="dbusername"
        label="数据库账号"
        align="center"
        width="120"
      >
      </el-table-column>

      <el-table-column
        prop="dbpassword"
        label="数据库密码"
        align="center"
        width="200"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="300">
        <template #default="scope">
          <el-button @click="tedit = true" type="primary" size="small">
            编辑
          </el-button>
          <el-button @click="tdetail = true" type="danger" size="small">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "tmplist",
  props: {},
  data() {
    return {
      dilogdbconfigadd: false,
      dbConfigList: [],
      projectList: [],
      addDbForm: {
        db_env: "",
        dbdatabase: "",
        dbhost: "",
        dbname: "",
        dbpassword: "",
        dbport: "",
        dbusername: "",
        project_id: "",
      },
    };
  },
  created: function () {
    this.get_db_config();
    this.selectProject();
  },
  methods: {
    // 查询项目
    selectProject() {
      this.formData = [];
      this.$axios.get("/selectProject/").then((res) => {
        if (res.status === 200) {
          this.projectList = res.data;
        }
      });
    },
    get_db_config() {
      this.$axios.get("/get/dbconfig").then((res) => {
        this.dbConfigList = res.data;
      });
    },
    add_db_config() {
      this.$axios.post("/add/dbconfig", this.addDbForm).then((res) => {
        if (res.data.code == 1) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dilogdbconfigadd = false;
          this.get_db_config();
        } else {
          this.$massage.error("新增失败");
        }
      });
    },
  },
};
</script>

<style>
textarea {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.pjsubmit {
  margin-top: 50px;
  margin-left: 100px;
}
.t_header {
  margin-bottom: 10px;
}
.el-dialog__body {
  height: 55vh;
  overflow: auto;
}
.el-table__empty-block {
  min-height: 700px;
}
.el-table__body-wrapper {
  min-height: 700px;
}
.tips {
  font-size: 12px;
  color: red;
  font-weight: 700;
}
.slavedb {
  border: 1px solid red;
  display: block;
  font-weight: 700;
  border: 1px solid #f0f0f0;
  margin: 10px 10px 10px 3px;
  border-radius: 3px;
  box-shadow: 5px 5px 5px #888888;
  background-color: #e0e0e0;
  overflow: hidden;
  padding-bottom: 10px;
  padding-top: 10px;
  width: 70%;
  display: inline;
  float: left;
}
.label {
  float: left;
  display: inline;
  width: 20%;
  text-align: right;
}
.value {
  width: 100px;
  float: left;
  display: inline;
  width: 75%;
}
.clear {
  clear: both;
}
.slavetips {
  color: red;
  text-align: center;
  font-weight: 100;
  line-height: 12px;
}
.testconn {
  display: inline;
  float: right;
  width: 27.8%;
  margin-top: 200px;
}
</style>